@charset "utf-8";
@import './_color.scss';

/*@include rounded(10px);*/
@mixin rounded($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
            border-radius: $radius;
}


/*@include shadow(0, 1px, 2px, rgba(0,0,0,.5));*/
@mixin shadow($x, $y, $blur, $color:rgba(0,0,0,.1)) {
  -webkit-box-shadow: $x $y $blur $color;
     -moz-box-shadow: $x $y $blur $color;
          box-shadow: $x $y $blur $color;
}
/*@include shadow-inset(0, 1px, 2px, rgba(0,0,0,.5));*/
@mixin shadow-inset($x, $y, $blur, $color) {
    -webkit-box-shadow: inset $x $y $blur $color;
       -moz-box-shadow: inset $x $y $blur $color;
            box-shadow: inset $x $y $blur $color;
}
@mixin transition($property) {
    -webkit-transition: $property .2s ease;
       -moz-transition: $property .2s ease;
         -o-transition: $property .2s ease;
            transition: $property .2s ease;
}
/* @include box-sizing(); */
@mixin box-sizing {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
/* @include linear-gradient(#ff70b1, #d42a78); */
@mixin linear-gradient($from, $to , $direction:0deg) {
    /* Fallback for sad browsers */
    background-color: $to;
    /* Mozilla Firefox */
    background-image:-moz-linear-gradient($from, $to);
    /* Opera */
    background-image:-o-linear-gradient($from, $to);
    /* WebKit (Chrome 11+) */
    background-image:-webkit-gradient(linear, left top, right top, color-stop(0, $from), color-stop(1, $to));
    /* WebKit (Safari 5.1+, Chrome 10+) */
    background-image: -webkit-linear-gradient($direction, $from, $to);
    /* IE10 */
    background-image: -ms-linear-gradient($direction, $from, $to);
    /* W3C */
    background-image: linear-gradient($direction, $from, $to);
}


$_direction: 'top' !default;
$_default_color: $border_1 !default;

@mixin border($_direction, $_set_color : $_default_color){
  position: relative;
  &:after{
    content: '';
    display: block;
    position: absolute;
    background: $_set_color;
    @if $_direction == 'top' or $_direction == 'bottom' { 
      width: 100%;
      height: 1px;
      left: 0;
      right: 0;
    }
    @if $_direction == 'left' or $_direction == 'right' { 
      width: 1px;
      height: 100%;
      top: 0;
      bottom: 0;
    }
    @if $_direction == 'top'{
      top: 0;
    }
    @else if $_direction == 'bottom'{
      bottom: 0;
    }
    @else if $_direction == 'left'{
      left: 0;
    }
    @else if $_direction == 'right'{
      right: 0;
    }
  }
}


@mixin text_overflow($_line: 3){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $_line;
  -webkit-box-orient: vertical;
}


.primary_bg{
  @include linear-gradient(#56CCF2 0%, #2F80ED 100%, 120deg);
}

.secondary_bg{
  @include linear-gradient(#E29587 0%, #D66D75 100%, 120deg);
}

.black_bg{
  @include linear-gradient(#323232 0%, (#3F3F3F 40%, #1C1C1C 150%), 120deg);
}